<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.showEcharts2()
  },
  methods: {
    showEcharts2 () {
      this.myChart = echarts.init(this.$refs.echarts)
      const option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: { text: '模块标题样式' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
        },
        legend: { data: ['Line 1', 'Line 2'] },
        toolbox: { feature: { saveAsImage: {} } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: { width: 0 },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              // 线性渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(128, 255, 165)' },
                { offset: 1, color: 'rgb(1, 191, 236)' }
              ])
            },
            // 高亮
            emphasis: { focus: 'series' },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: { width: 0 },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(0, 221, 255)' },
                { offset: 1, color: 'rgb(77, 119, 255)' }
              ])
            },
            emphasis: { focus: 'series' },
            data: [120, 282, 111, 234, 220, 340, 310]
          }
        ]
      };
      this.myChart.setOption(option)
    },
  }
}
</script>
<style lang="scss" scoped></style>
